<template>
	<view class="map-container">
		<map id="map" class="map" :include-points="my_points" :show-location="true" :latitude="latitude" 
			:longitude="longitude"></map>
		<view class="right">
			<text class="gui-text-small gui-color-orange">{{merchants.length}}家</text>
		</view>
		<view class="control">
			<text class="gui-icons gui-block  gui-text-small" style="">移动缩放查看</text>
			<text style="width:10rpx;"></text>
			<text class="gui-icons gui-block gui-color-blue2 gui-h4" @click="locCenter">&#xe685;</text>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request'

	import Locator from './map.js'
	// var coordtransform = require('coordtransform');
	import coordtransform from 'coordtransform'

	export default {
		props: {
			merchants: {
				type: Array,
				default: []
			},
		},
		emits: ['getLocation'],
		computed: {

		},
		data() {
			return {
				latitude: 31.224468,
				longitude: 107.466061,
				_mapContext: null,
				my_positions: this.merchants,
				my_points: []
			}
		},
		watch: {
			merchants: function(newVal, old) {
				if (newVal.length > 0) {
					this.my_positions = newVal
					this.my_points = newVal.map(item => {
						return {
							latitude: item.coordinates.coordinates[1],
							longitude: item.coordinates.coordinates[0],
						}
					})
					this.renderMap()
				}
			}
		},
		onUnload() {

		},
		created() {
			this.initMap()
		},
		methods: {
			locCenter() {
				this.moveToLocation({
					latitude: this.latitude,
					longitude: this.longitude,
				})
			},
			initMap() {
				this._mapContext = uni.createMapContext("map", this)
				// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
				this._mapContext.initMarkerCluster({
					enableDefaultStyle: true,
					zoomOnClick: false,
					gridSize: 60,
					complete: (res) => {
						console.log('initMarkerCluster', res)
					}
				})

				this._mapContext.on("markerClusterCreate", (e) => {
					// console.log("markerClusterCreate", e);
				})
				this._mapContext.getScale({
					success: (r) => {
						// console.log("缩放等级", r.scale)
					}
				})
				this.addMarkers()
			},
			addMarkers() {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						uni.getLocation({
							type: 'gcj02',
							// type: 'wgs84',
							success: (res) => {
								//wgs84转国测局坐标
								// var wgs84togcj02=coordtransform.wgs84togcj02(116.404, 39.915);
								//国测局坐标转wgs84坐标
								var gcj02towgs84 = coordtransform.gcj02towgs84(res.latitude, res
									.longitude);
								this.$emit("getLocation", {
									latitude: gcj02towgs84[0],
									longitude: gcj02towgs84[1]
								})

								this.moveToLocation({
									latitude: res.latitude,
									longitude: res.longitude,
								})

							},
							fail(e) {
								console.log(e)
							}
						});

					}
				})
			},
			moveToLocation(posObj) {
				const that = this
				this.latitude = posObj.latitude;
				this.longitude = posObj.longitude;
				this._mapContext.moveToLocation({
					latitude: posObj.latitude,
					longitude: posObj.longitude,
				})
			},
			renderMap() {
				let markers = []
				this.my_positions.forEach((p, i) => {
					// 转国标
					markers.push(
						Object.assign({}, {
							id: p.id,
							iconPath: p.logo,
							title: p.name,
							latitude: p.coordinates.coordinates[1],
							longitude: p.coordinates.coordinates[0],
							width: 30,
							height: 30,
							joinCluster: true, // 指定了该参数才会参与聚合
							callout: {
								padding: 5,
								display: "BYCLICK",
								textAlign: "center",
								content: p.name,
								height: 20,
								borderRadius: 0,
								color: '#ffff00',
								bgColor: '#f57f17',
								anchorX: 0,
								anchorY: -5,
							},
						}, p)
					)
				})

				this._mapContext.addMarkers({
					markers,
					clear: true,
					complete(res) {
						// console.log("addMarkers", res)
					}
				})
			}
		},
		expose: ['addMarkers', "moveToLocation", "renderMap", "getLocation"],
	}
</script>

<style lang="scss" scoped>
	.map-container {
		width: 492rpx;
		height: 300rpx;
		position: relative;

		.right {
			position: absolute;
			right: 0rpx;
			bottom: 80rpx;
			height: 60rpx;
			width: 60rpx;
			display: flex;
			box-sizing: border-box;
			justify-content: center;
			align-items: center;
			background-color: white;
			border: 2rpx solid #ddd;
		}

		.control {
			z-index: 1000;
			position: absolute;
			padding: 5rpx 8rpx;
			box-sizing: border-box;
			justify-content: space-between;
			align-items: center;
			display: flex;
			right: 0rpx;
			bottom: 0rpx;
			height: 60rpx;
			background-color: white;
			border: 2rpx solid #ddd;
		}
	}

	.map {
		width: 100%;
		height: 100%;
	}
</style>